<template>
	<view class="container">
		<!-- 主内容区（滚动容器） -->
		<scroll-view class="main-scroll" scroll-y>
			<view class="content-wrapper">
				<!-- 1. 泉州风光轮播 -->
				<view class="module-card">
					<view class="section-title">泉州风光</view>
					<swiper class="carousel" autoplay interval="4000" circular indicator-dots
						indicator-active-color="#fff" indicator-color="rgba(255,255,255,0.5)">
						<swiper-item v-for="(img, index) in sceneryImages" :key="index">
							<image :src="img" mode="aspectFill" class="scenery-img" lazy-load />
						</swiper-item>
					</swiper>
				</view>

				<!-- 2. 泉州介绍（优化字体） -->
				<view class="module-card">
					<view class="section-title">泉州介绍</view>
					<rich-text :nodes="formattedIntro"></rich-text>
				</view>

				<!-- 3. 探索进度 -->
				<view class="module-card">
					<view class="section-title">探索进度</view>
					<view class="progress-text">当前进度: {{ progress }}%</view>
					<progress :percent="progress" show-info stroke-width="6" activeColor="#1E88E5"
						backgroundColor="#E0E0E0" />
				</view>

				<!-- 4. 选择城市 -->
				<view class="module-card">
					<view class="section-title">选择城市</view>
					<picker mode="multiSelector" :range="cityData" :value="selectedCityIndex" @change="handleCityChange"
						@columnchange="handleColumnChange">
						<view class="picker-display">
							<text class="picker-text">当前选择: {{ selectedCityText }}</text>
						</view>
					</picker>
				</view>




				<!-- 5. 泉州宣传视频 -->
				<view class="module-card">
					<view class="section-title">泉州宣传</view>
					<video class="promo-video" :src="videoUrl" :poster="videoPoster" controls :autoplay="false"
						:loop="false" object-fit="cover"></video>
				</view>
				<!-- 6. 泉州背景音乐（新增功能） -->
				<view class="module-card">
					<view class="section-title">泉州背景音乐</view>
					<button class="music-btn" :class="{ playing: isPlaying }" @click="toggleMusic">
						<text class="btn-text">{{ isPlaying ? '暂停' : '播放' }}</text>
					</button>
					<view class="music-desc">泉州南音 - 泉州传统乐团</view>
				</view>
				<!-- 7. 偏好设置（优化样式） -->
				<view class="module-card">
					<view class="section-title">偏好设置</view>

					<!-- 出行方式 -->
					<view class="setting-item">
						<view class="setting-label">出行方式:</view>
						<radio-group v-model="travelMode" class="radio-group">
							<label class="radio-option" v-for="(item, index) in travelOptions" :key="index">
								<radio :value="item.value" color="#1E88E5" />
								<text class="radio-text">{{ item.label }}</text>
							</label>
						</radio-group>
					</view>

					<!-- 显示推荐景点 -->
					<view class="setting-item">
						<view class="setting-label">显示推荐景点:</view>
						<switch v-model="showRecommend" color="#1E88E5" active-value="true" inactive-value="false" />
					</view>

					<view class="preference-item">
						<view class="item-label">探索半径:</view>
						<view class="slider-group">
							<slider v-model="searchRadius" min="1" max="20" activeColor="#0984e3" />
							<text class="radius-text">{{ searchRadius }}km</text>
						</view>
					</view>
				</view>

				<!-- 底部留白 -->
				<view class="bottom-padding"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播图图片
				sceneryImages: [
					'/static/city5.jpg',
					'/static/city1.png',
					'/static/city2.jpg'
				],

				// 泉州介绍（Uniapp富文本格式，优化字体）
				formattedIntro: [{
						name: 'p',
						attrs: {
							style: 'font-size: 16px; font-weight: 600; color: #333; margin-bottom: 8px;'
						},
						children: [{
							type: 'text',
							text: '海上丝绸之路之起点 - 泉州'
						}]
					},
					{
						name: 'p',
						attrs: {
							style: 'font-size: 14px; line-height: 1.6; margin-bottom: 8px;'
						},
						children: [{
								name: 'span',
								attrs: {
									style: 'font-weight: bold; color: #999;'
								}, // 历史文化：灰色加粗
								children: [{
									type: 'text',
									text: '历史文化：'
								}]
							},
							{
								type: 'text',
								text: '泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期被誉为“东方第一大港”。'
							}
						]
					},
					{
						name: 'p',
						attrs: {
							style: 'font-size: 14px; line-height: 1.6; margin-bottom: 8px;'
						},
						children: [{
								name: 'span',
								attrs: {
									style: 'font-weight: bold; color: #999;'
								}, // 著名景点：灰色加粗
								children: [{
									type: 'text',
									text: '著名景点：'
								}]
							},
							{
								type: 'text',
								text: '清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。'
							}
						]
					},
					{
						name: 'p',
						attrs: {
							style: 'font-size: 14px; line-height: 1.6;'
						},
						children: [{
								name: 'span',
								attrs: {
									style: 'font-weight: bold; color: #999;'
								}, // 特色文化：灰色加粗
								children: [{
									type: 'text',
									text: '特色文化：'
								}]
							},
							{
								name: 'span',
								attrs: {
									style: 'color: #007AFF;'
								}, // 南音：蓝色
								children: [{
									type: 'text',
									text: '南音'
								}]
							},
							{
								type: 'text',
								text: '、'
							},
							{
								name: 'span',
								attrs: {
									style: 'color: #007AFF;'
								}, // 木偶戏：蓝色
								children: [{
									type: 'text',
									text: '木偶戏'
								}]
							},
							{
								type: 'text',
								text: '和'
							},
							{
								name: 'span',
								attrs: {
									style: 'color: #007AFF;'
								}, // 梨园戏：蓝色
								children: [{
									type: 'text',
									text: '梨园戏'
								}]
							},
							{
								type: 'text',
								text: '等丰富的非物质文化遗产。'
							}
						]
					}
				],

				// 探索进度
				progress: 60,

				// 城市选择数据
				cityData: [
					['福建省', '浙江省', '广东省'],
					['泉州市', '福州市', '厦门市'],
					['丰泽区', '鲤城区', '洛江区']
				],
				selectedCityIndex: [0, 0, 0],
				selectedCityText: '福建省 - 泉州市 - 丰泽区',

				// 音乐播放相关
				audioCtx: null,
				isPlaying: false,
				musicUrl: '/static/city-music.mp3', // 替换为实际音乐文件路径

				// 视频资源
				videoUrl: '/static/city-video.mp4', // 替换为实际视频路径
				videoPoster: '/static/video-poster.jpg', // 视频封面

				// 偏好设置
				travelMode: 'bus',
				travelOptions: [{
						label: '公交',
						value: 'bus'
					},
					{
						label: '自驾',
						value: 'self'
					},
					{
						label: '步行',
						value: 'walk'
					}
				],
				showRecommend: false,
				searchRadius: 10
			};
		},

		onLoad() {
			// 初始化音频上下文（Uniapp规范）
			this.audioCtx = uni.createInnerAudioContext();
			this.audioCtx.src = this.musicUrl;

			// 监听音频播放事件
			this.audioCtx.onPlay(() => {
				this.isPlaying = true;
			});
			this.audioCtx.onPause(() => {
				this.isPlaying = false;
			});
			this.audioCtx.onEnded(() => {
				this.isPlaying = false;
			});
			this.audioCtx.onError((err) => {
				console.error('音频播放错误:', err);
				uni.showToast({
					title: '播放失败',
					icon: 'none'
				});
			});
		},

		onUnload() {
			// 页面卸载时销毁音频上下文（Uniapp内存管理）
			if (this.audioCtx) {
				this.audioCtx.stop();
				this.audioCtx.destroy();
			}
		},

		methods: {
			// 切换音乐播放/暂停
			toggleMusic() {
				if (this.isPlaying) {
					this.audioCtx.pause();
				} else {
					this.audioCtx.play();
				}
			},

			// 城市选择变更
			handleCityChange(e) {
				this.selectedCityIndex = e.detail.value;
				this.updateCityText();
			},

			// 城市选择列变更（联动效果）
			handleColumnChange(e) {
				const {
					column,
					value
				} = e.detail;
				this.selectedCityIndex[column] = value;

				// 省份变更时更新城市列表
				if (column === 0) {
					switch (value) {
						case 0: // 福建省
							this.cityData[1] = ['泉州市', '福州市', '厦门市'];
							this.cityData[2] = ['丰泽区', '鲤城区', '洛江区'];
							break;
						case 1: // 浙江省
							this.cityData[1] = ['杭州市', '宁波市', '温州市'];
							this.cityData[2] = ['上城区', '西湖区', '拱墅区'];
							break;
						case 2: // 广东省
							this.cityData[1] = ['广州市', '深圳市', '东莞市'];
							this.cityData[2] = ['天河区', '越秀区', '海珠区'];
							break;
					}
					this.selectedCityIndex[1] = 0;
					this.selectedCityIndex[2] = 0;
				}

				this.updateCityText();
			},

			// 更新选中城市文本
			updateCityText() {
				const [p, c, d] = this.selectedCityIndex;
				this.selectedCityText = `${this.cityData[0][p]} - ${this.cityData[1][c]} - ${this.cityData[2][d]}`;
			}

		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.navbar-title {
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
	}

	/* 滚动容器 */
	.main-scroll {
		flex: 1;
		height: calc(100vh - 100rpx);
	}

	.content-wrapper {
		padding: 24rpx;
	}

	/* 模块卡片通用样式 */
	.module-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 28rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	/* 模块标题 */
	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 24rpx;
		padding-left: 14rpx;
		border-left: 6rpx solid #1E88E5;
		line-height: 1;
	}

	/* 轮播图样式 */
	.carousel {
		width: 100%;
		height: 420rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.scenery-img {
		width: 100%;
		height: 100%;
	}

	rich-text {
		display: block;
		line-height: 1.6;
		margin: 0;
		padding: 0;
	}

	/* 进度条样式 */
	.progress-text {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 16rpx;
	}

	/* 城市选择器样式 */
	.picker-display {
		padding: 20rpx 16rpx;
		background-color: #f9f9f9;
		border-radius: 8rpx;
		border: 1rpx solid #eee;
	}

	.picker-text {
		font-size: 26rpx;
		color: #666;
	}

	/* 音乐播放样式 */
	.music-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #1E88E5;
		color: #fff;
		font-size: 28rpx;
		border-radius: 8rpx;
		margin-bottom: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.music-btn.playing {
		background-color: #FF5722;
	}

	.btn-text {
		display: inline-flex;
		align-items: center;
	}

	.music-desc {
		font-size: 26rpx;
		color: #666;
		text-align: center;
	}

	/* 视频样式 */
	.promo-video {
		width: 100%;
		height: 360rpx;
		border-radius: 12rpx;
		background-color: #000;
	}

	/* 偏好设置样式 */
	.setting-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.setting-item:last-child {
		margin-bottom: 0;
	}

	.setting-label {
		font-size: 28rpx;
		color: #333;
		width: 180rpx;
		line-height: 1;
	}

	/* 出行方式选择 */
	.radio-group {
		display: flex;
		flex-wrap: wrap;
		gap: 30rpx;
	}

	.radio-option {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.radio-text {
		font-size: 26rpx;
		color: #666;
	}

	/* 探索半径设置 */
	.radius-setting {
		align-items: center;
	}

	.radius-control {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.radius-value {
		font-size: 26rpx;
		color: #666;
		margin-left: 16rpx;
		min-width: 60rpx;
		text-align: center;
	}

	/* 底部留白 */
	.bottom-padding {
		height: 40rpx;
	}
</style>